<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<style>
	*{
		margin:0px;
		padding:0px;
	}
	body{
		background:#efefef;
	}
	.top{
		display:flex;
		justify-content: space-between;
		align-items: center;
		width:100%;
		background:#efefef;
	}
	.weixin{
		margin:10px;
		font-size:18px;
		font-weight:bold;
	}
	.right{
		margin:10px;

	}

    .nickname{
        font-size:20px;
        font-weight:bold;
        margin-bottom:20px;
		font-weight:bold;
        width:80px;

    }
	    .list_item{
        display:flex;
        justify-content: space-between;
        align-items: center;
        background:white;
        padding:10px;
        position:relative;
    }
	    .pictxt{
        display: flex;
        align-items: center;
    }
    .pictxt img{
        margin-left:10px;
		width:35px;
		border-radius:5px;
    }
	.txt{
		margin-left:15px;
	}
    .line{
        width:80%;
        height:0.5px;
        background:#efefef;
        position:absolute;
        right:0px;
        bottom:0px;
    }
    .list{
        margin-top:10px;
        margin-bottom:10px;
    }
	.list2{
        
        margin-bottom:10px;
    }
    .tabbar{
        position:fixed;
        width:100%;
        left:0px;
        bottom:0px;
        display:flex;background:white;padding-top:5px;}
    .tab{ padding-bottom:5px;width:25%;font-size:12px;text-align: center;
        position:relative}
    .txt{margin-top:2px;
	margin-right:15px;
	}
    .notice{
        position:absolute;
        left:52%;top:-3px;
        width:14px;height:14px;
        line-height:14px;text-align: center;
        font-size:8px;background:red;
        color:white;
        border-radius: 50%;
    }
	.a1{
		margin-left:20px;
		color:#777;
		font-size:10px;
		height:20px;
		line-height:20px;
		margin-bottom:10px;
	}
	.z1{
		text-align:center;
		color:#777;
	
	
	}
	.LJ{
		color:black;
	}
	
	
</style>

<div class="all">
<div class="top">
  <div class="weixin">通讯录</div>
  <div class="right">
    <img  src="FDJ.png"  width="18"/>
    <img  src="GD.png"  width="18"/>
  </div>
</div>
    <!-- /页面头部 -->

 <div class="item_list">
 		 <div class="list2">
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
				   <img class="arrow" src="新的朋友.png" width="20">
                    <div class="txt">新的朋友</div>
                </div>
             
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
				   <img class="arrow" src="群聊.png" width="20">
                    <div class="txt">群聊</div>
                </div>
             
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
				   <img class="arrow" src="标签.png" width="20">
                    <div class="txt">标签</div>
                </div>
             
            </div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
				   <img class="arrow" src="公众号.png" width="20">
                    <div class="txt">公众号</div>
                </div>
             
            </div>
        </div>
		
        <div class="list2 list">
		<div class="a1">G</div>
            <div class="list_item">
			<a class="LJ" href="18.html" style="text-decoration:none">
                <div class="line"></div>
                <div class="pictxt">
				   <img class="arrow" src="2.png" width="20">
                    <div class="txt">高圆圆</div>
                </div>
			</a>
             
            </div>
		<div class="list2 list">
		<div class="a1">S</div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
				   <img class="arrow" src="3.png" width="20">
                    <div class="txt">宋甜甜</div>
                </div>
             </div>
            </div>
         </div>

        <div class="list2 list">
			<div class="a1">X</div>
            <div class="list_item">
                <div class="line"></div>
                <div class="pictxt">
				   <img class="arrow" src="1.png" width="20">
                    <div class="txt">徐春香</div>
                </div>
             
            </div>


        </div>
		

         </div>
		   </div>
<div class="tabbar">
	
	<div class="tab">
		<a class="LJ" href="index.html" style="text-decoration:none">
			<img width="24px" src="微信.png"  />
			<div class="txt">微信</div>
			<div class="notice">5</div>
		</a>
	</div>
	
	
	<div class="tab">
		
			<img width="24px" src="通讯录2.png" />
			<div class="txt">通讯录</div>
		</a>
	</div>
	
	<div class="tab">
	<a class="LJ" href="fx.html" style="text-decoration:none">
		<img width="24px" src="发 现.png" />
		<div class="txt">发现</div>
	</div>
	
	<div class="tab">
		<a class="LJ" href="4.html" style="text-decoration:none">
			<img width="24px" src="我.png" />
			<div class="txt">我</div>
		</a>
	</div>
	
</div>


<div class="z1">3位朋友及联系人</div>


